<template>
  <ContentWrap v-loading="formLoading">

    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="140px" v-loading="formLoading">
      <el-row>
        <el-col :span="8">
          <el-form-item label="订单类型" prop="type">
            <el-select v-model="formData.type" placeholder="请选择订单类型" :disabled="true">
              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.ORDER_TYPE)" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交易类型" prop="tradeType">
            <el-select v-model="formData.tradeType" placeholder="请选择交易类型" :disabled="true">
              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_STATUS)" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否评价" prop="commentStatus">
            <el-radio-group v-model="formData.commentStatus" :disabled="true">
              <el-radio v-for="dict in getIntDictOptions(DICT_TYPE.IS_NO)" :key="dict.value" :label="dict.value">
                {{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="订单来源终端" prop="terminal">
            <el-radio-group v-model="formData.terminal" :disabled="true">
              <el-radio v-for="dict in getIntDictOptions(DICT_TYPE.TERMINAL)" :key="dict.value" :label="dict.value">
                {{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider border-style="dashed">1.发货信息</el-divider>
      <el-row>
        <el-col :span="12">
          <el-row>
            <el-col :span="24">
              <el-form-item label="发货视频" prop="receiverVideo">
                <video style="width: 400px; height: 200px" v-for="(video, index) in deliveryVideoList" :key="index"
                  :src="video" controls="controls">您的浏览器不支持视频播放</video>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="24" v-if="formData.deliveryType">
              <el-form-item label="物流配送类型" prop="deliveryType">
                {{ formData.deliveryType == "1" ? "快递物流" : "其他配送" }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="物流公司编号" prop="logisticsId">
                {{ formData.logisticsId }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="物流公司单号" prop="logisticsNo">
                {{ formData.logisticsNo }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="卖方发货时间" prop="deliveryTime">
                {{ formData.deliveryTime }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="卖方提交备注" prop="saleUserRemark">
                {{ formData.saleUserRemark }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发货凭证图" prop="deliveryImages">
            <UploadImgs v-model="formData.deliveryImages" :disabled="true" />
          </el-form-item>
        </el-col>

        <el-divider border-style="dashed">2.收货信息</el-divider>
        <el-col :span="12">
          <el-row>
            <el-col :span="24">
              <el-form-item label="验货视频" prop="receiverVideo">
                <video style="width: 400px; height: 200px" v-for="(video, index) in receiverVideoList" :key="index"
                  :src="video" controls="controls">您的浏览器不支持视频播放</video>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="12">
          <el-row>
            <el-col :span="24">
              <el-form-item label="收件人名称" prop="receiverName">
                {{ formData.receiverName }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="收件人手机" prop="receiverMobile">
                {{ formData.receiverMobile }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="收件人公司" prop="receiverCompanyName">
                {{ formData.receiverCompanyName }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="收件人地址" prop="receiverDetailAddress">
                {{ formData.receiverDetailAddress }}
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData.receiveTime">
              <el-form-item label="收货时间" prop="receiveTime">
                {{ formData.receiveTime }}
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData.salesLogisticsNo">
              <el-form-item label="退货物流单" prop="salesLogisticsNo">
                {{ formData.salesLogisticsNo }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="买方用户备注" prop="buyUserRemark">
                {{ formData.buyUserRemark }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="24">
          <el-form-item label="收货图片" prop="salesImages">
            <UploadImgs v-model="formData.salesImages" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider border-style="dashed">购买信息</el-divider>
      <el-row>

        <el-col :span="12">
          <el-form-item label="卖方用户" prop="saleUserName">
            {{ formData.saleUserName }}(ID: {{ formData.saleUserId }})
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="购买用户" prop="buyUserName">
            {{ formData.buyUserName }}(ID: {{ formData.buyUserId }})
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单流水号" prop="no">
            {{ formData.no }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="购买的数量" prop="productCount">
            {{ formData.productCount }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品原价" prop="totalPrice">
            {{ formData.totalPrice / 100 }} 元
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="应付金额" prop="payPrice">
            {{ formData.payPrice / 100 }} 元
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保费金额" prop="premiumPrice">
            {{ formData.premiumPrice / 100 }} 元
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="货款支付" prop="payStatus">
            {{ formData.payStatus == "1" ? "是" : "否" }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保费支付" prop="premiumStatus">
            {{ formData.premiumStatus == "1" ? "是" : "否" }}
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="formData.payTime">
          <el-form-item label="订单支付时间" prop="payTime">
            {{ formData.payTime }}
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="formData.finishTime">
          <el-form-item label="订单完成时间" prop="finishTime">
            {{ formData.finishTime }}
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="formData.cancelTime">
          <el-form-item label="订单取消时间" prop="cancelTime">
            {{ formData.cancelTime }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider border-style="dashed">可修改信息</el-divider>

      <el-row>
        <el-col :span="24">
          <el-form-item label="平台操作备注" prop="remark">
            <el-input type="textarea" v-model="formData.remark" placeholder="请输入平台操作备注" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-col :span="24">
        <el-form-item label="平台操作" prop="operateStatus">
          <el-radio-group v-model="formData.operateStatus">
            <el-radio v-for="dict in getIntDictOptions(DICT_TYPE.OPERATE_STATUS)" :key="dict.value" :label="dict.value">
              {{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="订单状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio v-for="dict in getIntDictOptions(DICT_TYPE.ORDER_STATUS)" :key="dict.value" :label="dict.value">
              {{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-form>

    <el-form>
      <el-form-item style="float: right">
        <el-button :loading="formLoading" type="primary" @click="submitForm">保存修改</el-button>
        <el-button @click="close">返回</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
</template>

<script setup lang="ts">
import { SupplyOrderApi, SupplyOrderVO, SupplyOrderNewVO } from '@/api/wine/supplyorder'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
/** 供求订单管理 表单 */
defineOptions({ name: 'SupplyOrderForm' })
const { push, currentRoute } = useRouter() // 路由
const { params } = useRoute() // 查询参数
const { delView } = useTagsViewStore() // 视图操作

const message = useMessage() // 消息弹窗

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

const deliveryVideoList = ref([]);
const receiverVideoList = ref([]);

const formData = ref({
  id: undefined,
  no: undefined,
  type: undefined,
  terminal: undefined,
  saleInfoId: undefined,
  saleUserId: undefined,
  saleUserName: undefined,
  saleUserRemark: undefined,
  buyUserId: undefined,
  buyUserName: undefined,
  buyUserRemark: undefined,
  buyUserIp: undefined,
  status: undefined,
  productCount: undefined,
  cancelType: undefined,
  tradeType: undefined,
  commentStatus: undefined,
  brokerageUserId: undefined,
  payOrderId: undefined,
  payStatus: undefined,
  payTime: undefined,
  payChannelCode: undefined,
  finishTime: undefined,
  cancelTime: undefined,
  totalPrice: undefined,
  payPrice: undefined,
  premiumPrice: undefined,
  premiumStatus: undefined,
  deliveryType: undefined,
  deliveryTime: undefined,
  deliveryImages: [],
  deliveryVideo: undefined,
  logisticsId: undefined,
  logisticsNo: undefined,
  receiveTime: undefined,
  receiverName: undefined,
  receiverMobile: undefined,
  receiverAreaId: undefined,
  receiverCompanyName: undefined,
  receiverDetailAddress: undefined,
  receiverVideo: undefined,
  operateStatus: undefined,
  salesImages: [],
  salesLogisticsNo: undefined,
  remark: undefined
})
const formRules = reactive({
  no: [{ required: true, message: '订单流水号不能为空', trigger: 'blur' }],
  type: [{ required: true, message: '订单类型不能为空', trigger: 'change' }],
  terminal: [{ required: true, message: '订单来源终端不能为空', trigger: 'blur' }],
  buyUserId: [{ required: true, message: '购买用户编号(买方ID)不能为空', trigger: 'blur' }],
  buyUserIp: [{ required: true, message: '购买用户IP不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '订单状态不能为空', trigger: 'blur' }],
  productCount: [{ required: true, message: '购买的数量不能为空', trigger: 'blur' }],
  commentStatus: [{ required: true, message: '是否评价不能为空', trigger: 'blur' }],
  payStatus: [{ required: true, message: '货款是否已支付：[0:未支付 1:已经支付过]不能为空', trigger: 'blur' }],
  totalPrice: [{ required: true, message: '商品原价（总），单位：分不能为空', trigger: 'blur' }],
  payPrice: [{ required: true, message: '应付金额（总），单位：分不能为空', trigger: 'blur' }],
  deliveryType: [{ required: true, message: '配送类型不能为空', trigger: 'change' }],
  receiverName: [{ required: true, message: '收件人名称不能为空', trigger: 'blur' }],
  receiverMobile: [{ required: true, message: '收件人手机不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const getDetail = async () => {

  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      let data = await SupplyOrderApi.getSupplyOrder(id)

      data.terminal = data.terminal ? data.terminal : 1
      data.commentStatus = data.commentStatus ? data.commentStatus : 2
      data.payStatus = data.payStatus ? data.payStatus : 2
      data.premiumStatus = data.premiumStatus ? data.premiumStatus : 2

      data.deliveryType = data.deliveryType ? data.deliveryType : 1
      data.deliveryImages = data.deliveryImages ? data.deliveryImages.split(',') : []
      data.salesImages = data.salesImages ? data.salesImages.split(',') : []

      formData.value = data

      console.log(data.deliveryVideo, 1111)
      console.log(data.receiverVideo, 2222)
      //视频可能有多个
      if (data.deliveryVideo != undefined && data.deliveryVideo.indexOf(',') > 0) {
        deliveryVideoList.value = data.deliveryVideo.split(",")
      }
      else {
        deliveryVideoList.value.push(data.deliveryVideo)
      }
      if (data.receiverVideo != undefined && data.receiverVideo.indexOf(',') > 0) {
        receiverVideoList.value = data.receiverVideo.split(",")
      }
      else {
        receiverVideoList.value.push(data.receiverVideo)
      }
      console.log(receiverVideoList.value, 3333)
    } finally {
      formLoading.value = false
    }
  }
}

onMounted(async () => {
  await getDetail()
})
const id = params.id as unknown as number


/** 提交表单 */
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    //const data = formData.value as unknown as SupplyOrderVO
    const data = {
      id: formData.value.id,
      operateStatus: formData.value.operateStatus,
      status: formData.value.status
    }

    if (!id) {
      await SupplyOrderApi.createSupplyOrder(data)
      message.success(t('common.createSuccess'))
    } else {
      //await SupplyOrderApi.updateSupplyOrder(data)
      //采用此接口
      await SupplyOrderApi.updatestatus(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    close()
  } finally {
    formLoading.value = false
  }
}

/** 关闭按钮 */
const close = () => {
  delView(unref(currentRoute))
  push({ name: 'SupplyOrder' })
}
/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    no: undefined,
    type: undefined,
    terminal: undefined,
    saleInfoId: undefined,
    saleUserId: undefined,
    saleUserName: undefined,
    saleUserRemark: undefined,
    buyUserId: undefined,
    buyUserName: undefined,
    buyUserRemark: undefined,
    buyUserIp: undefined,
    status: undefined,
    productCount: undefined,
    cancelType: undefined,
    tradeType: undefined,
    commentStatus: undefined,
    brokerageUserId: undefined,
    payOrderId: undefined,
    payStatus: undefined,
    payTime: undefined,
    payChannelCode: undefined,
    finishTime: undefined,
    cancelTime: undefined,
    totalPrice: undefined,
    payPrice: undefined,
    premiumPrice: undefined,
    premiumStatus: undefined,
    deliveryType: undefined,
    deliveryTime: undefined,
    deliveryImages: [],
    deliveryVideo: undefined,
    logisticsId: undefined,
    logisticsNo: undefined,
    receiveTime: undefined,
    receiverName: undefined,
    receiverMobile: undefined,
    receiverAreaId: undefined,
    receiverCompanyName: undefined,
    receiverDetailAddress: undefined,
    receiverVideo: undefined,
    operateStatus: undefined,
    salesImages: [],
    remark: undefined
  }
  formRef.value?.resetFields()
}
</script>
